<!--
 * @Description: 首页 搜索框 手动
 * @Version: 2.0
 * @Author: zhao
 * @Date: 2022-06-13 16:50:19
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-06 16:31:01
-->
<template>
    <div class="search" :style="{ width: searchProps.width }">
        <!-- <div class="search_input" @keyup.enter="GetArchive('Manually')">
            <el-input v-model="$store.state.table.searchData.Title" placeholder="请输入档案名称/档案号">
                <div slot="append" @click="GetArchive('Manually')">搜索</div>
            </el-input>
            <span v-if="searchProps.IsSeniorSearch" class="cursor" style="margin: 0 10px" @click="setAdvanced()">高级搜索</span>
            <span class="SpatialRetrieval cursor" @click="$router.push('/SpatialRetrieval')">空间检索</span>
        </div> -->

        <div v-if="searchProps.IsSeniorSearch && $store.state.search.isOpen" class="SeniorSearch" @keyup.enter="GetArchive('Manually')">
            <el-form :inline="true" :model="$store.state.table.searchData" class="demo-form-inline" label-width="120px ">
                <!-- <el-form-item label="档案号:">
                    <el-input clearable v-model="$store.state.table.searchData.Sn" placeholder="档案号" @input="onInput()" @blur="GetArchive()" />
                </el-form-item> -->
                <el-form-item label="资料名称/档案号:">
                    <el-input
                        clearable
                        v-model="$store.state.table.searchData.Title"
                        placeholder="例：8004"
                        @input="onInput()"
                        @blur="GetArchive()"
                    />
                </el-form-item>
                <el-form-item label="编著者:">
                    <el-input
                        clearable
                        v-model="$store.state.table.searchData.Author"
                        placeholder="例：田某某"
                        @input="onInput()"
                        @blur="GetArchive()"
                    />
                </el-form-item>
                <el-form-item label="矿种:">
                    <!-- <el-input clearable v-model="$store.state.table.searchData.Mineral" placeholder="例：铁" @input="onInput()" @blur="GetArchive()" /> -->
                    <el-select
                        v-model="$store.state.table.searchData.Mineral"
                        filterable
                        allow-create
                        clearable
                        default-first-option
                        placeholder="例：铁"
                        @change="GetArchive()"
                    >
                        <el-option v-for="item in mineralSpeciesOption" :key="item.id" :label="item.mineral" :value="item.mineral"> </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="形成时间:">
                    <el-date-picker
                        v-model="formDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="例:2020-1-1"
                        end-placeholder="例:2021-1-1"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @blur="GetArchive()"
                    />
                </el-form-item>

                <el-form-item label="行政区划:">
                    <el-cascader
                        v-model="$store.state.table.searchData.District"
                        :options="District"
                        :props="{ checkStrictly: true, value: 'name', label: 'name' }"
                        clearable
                        placeholder="例：河北省"
                        @change="GetArchive()"
                    />
                </el-form-item>

                <div class="search_button">
                    <el-form-item :label="i.label + ':'" class="languages" v-for="(i, index) in search_buttonData" :key="index + 'search_buttonData'">
                        <el-button
                            type="goon"
                            :plain="s.IsSelect"
                            @click="setLanguage(i.label, s.name, s.label)"
                            v-on:keydown.enter.prevent=""
                            v-for="(s, sindex) in i.data"
                            :key="sindex + 'sindex'"
                            ref="btn"
                        >
                            {{ s.name }}
                        </el-button>
                        <!-- <div>sss</div> -->
                    </el-form-item>
                </div>

                <div style="text-align: right; padding-top: 10px">
                    <el-button @click="GetArchive('Manually')" style="font-size: 15px; background: #1b50a0; color: #fff">搜索</el-button>
                    <el-button @click="reset()" style="font-size: 15px; background: #1b50a0; color: #fff">重置</el-button>
                    <!-- <div slot="append" @click="GetArchive('Manually')">搜索</div> -->
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import searchData from "./searchData"
import router from "@/router"
export default {
    components: {},
    props: {
        searchProps: {
            type: Object,
            default: function () {
                return {
                    width: "500px", // 搜索框宽
                    IsSeniorSearch: false, // 高级搜索
                }
            },
        },
    },
    data() {
        return {
            searchData: "",
            isOpen: true, // 是否展开高级搜索
            formInline: {},
            formDate: [],
            search_buttonData: JSON.parse(JSON.stringify(searchData.search_buttonData)),
            region: searchData.region,
            District: [],
            mineralSpeciesOption: [],
        }
    },
    mounted() {
        this.MineralInfo()
        this.getRouterData()
        this.getDistrict()

        this.$nextTick(() => {
            this.$refs.btn.forEach((s) => {
                if (s.nativeType == "button") {
                    s.$el.onkeydown = (e) => {
                        let _key = window.event.keyCode
                        if (_key === 13) {
                            return false
                        }
                    }
                }
            })
        })

        // this.setAdvanced()
    },
    watch: {
        // formInline() {
        //     this.$store.state.table.searchData = this.formInline
        // },
    },
    methods: {
        async GetArchive(type) {
            if (type == "Manually") this.$store.state.table.searchData.pageIndex = 1

            this.$store.state.table.searchData && (this.formInline = { ...this.$store.state.table.searchData })

            let searchdata = {}
            // console.log(this.$store.state.table.searchData.formDate);
            // this.$store.state.table.searchData.formDate && (this.formDate = this.$store.state.table.searchData.formDate)
            this.formDate || (this.formDate = [])
            let Archivedata = {
                Sn: this.formInline.Sn || "",
                Mineral: this.formInline.Mineral || "",
                Author: this.formInline.Author || "",
                // ProjectTitle: this.formInline.ProjectTitle,
                FormDateBegin: this.formDate[0] || "",
                FormDateEnd: this.formDate[1] || "",
                District: this.formInline.District || [],
                Title: this.formInline.Title || "",
                Category: this.getAdvancedArr("Category"),
                Language: this.getAdvancedArr("Language"),
                WorkDegree: this.getAdvancedArr("WorkDegree"),
            }

            // if (Archivedata.Category.length < 1) {
            //     this.search_buttonData[1].data[0].IsSelect = false
            //     Archivedata.Category = ["不限"]
            // }
            // if (Archivedata.Language.length < 1) {
            //     this.search_buttonData[0].data[0].IsSelect = false
            //     Archivedata.Language = ["不限"]
            // }
            // if (Archivedata.WorkDegree.length < 1) {
            //     this.search_buttonData[2].data[0].IsSelect = false
            //     Archivedata.WorkDegree = ["不限"]
            // }
            let search = {
                Title: this.formInline.Title,
            }

            searchdata = this.isOpen ? Archivedata : search
            // if (!pageSize || pageSize == null) pageSize = 10
            // if (!pageIndex || pageIndex == null) pageIndex = 1
            searchdata.pageSize = this.$store.state.table.searchData.pageSize || 10
            searchdata.pageIndex = this.$store.state.table.searchData.pageIndex || 1
            if (searchdata.Title) {
                searchdata.Title = searchdata.Title.replace(/\s*/g, "")
            }
            if (searchdata.Sn) {
                searchdata.Sn = searchdata.Sn.replace(/\s*/g, "")
            }
            this.$store.state.table.searchData = searchdata
            const { data, count } = await this.$store.dispatch("ArchiveInfo/getArchive", searchdata)
            data.map((e) => {
                e.LonLat = this.getCentralData(e.maxX, e.maxY, e.minX, e.minY)
            })
            this.$store.state.table.tableData = data
            this.$store.state.table.PaginationData.total = count
            this.$store.state.map.mapList = data
            // this.$store.state.table.searchData = {
            //     pageSize: 10,
            //     pageIndex: 1,
            // }
        },

        setLanguage(label, name) {
            console.log("🚀 ~ file: index.vue:227 ~ setLanguage ~ label, name", label, name)
            this.search_buttonData.map((x, index) => {
                if (x.label === label) {
                    x.data.map((a, aindex) => {
                        if (name === "不限") {
                            return (a.IsSelect = a.name == "不限" ? false : true)
                        } else {
                            if (a.name === "不限") a.IsSelect = true
                        }
                        if (a.name == name) {
                            a.IsSelect = !a.IsSelect
                        }
                    })
                }
                if (x.data.every((e) => e.IsSelect)) x.data[0].IsSelect = false
            })

            this.GetArchive()
        },
        setLanguageTwo(label, name) {
            this.search_buttonData.map((x, index) => {
                if (x.label === label) {
                    x.data.map((a, aindex) => {
                        if (name === "不限") {
                            return (a.IsSelect = a.name == "不限" ? false : true)
                        } else {
                            if (a.name === "不限") a.IsSelect = true
                        }
                        if (a.name == name) {
                            a.IsSelect = !a.IsSelect
                        }
                    })
                }
            })
        },
        //获取 高级搜索的 选中多选项
        getAdvancedArr(prop) {
            let data = []
            this.search_buttonData.map((s) => {
                if (s.prop == prop) {
                    s.data.filter((e) => {
                        if (prop == "WorkDegree") {
                            if (!e.IsSelect) {
                                if (e.label == "小于1:100万") {
                                    data.push(...["1:1500000", "1:2000000", "1:2500000"])
                                } else if (e.label == "大于1:1万") {
                                    data.push(...["1:5000", "1:2000", "1:1000", "1:500"])
                                } else {
                                    data.push(e.label)
                                }
                            }
                        } else {
                            if (!e.IsSelect) data.push(e.name)
                        }
                    })
                }
            })
            return data
        },
        setAdvanced() {
            this.$store.state.search.isOpen = !this.$store.state.search.isOpen
        },
        async getDistrict() {
            const { data } = await this.$store.dispatch("map/getDivision")
            this.District = data
        },
        //获取中心坐标
        getCentralData(oneLon, oneLat, twoLon, twoLat) {
            //oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度；
            let aLon = 0,
                aLat = 0
            let bLon = Number(oneLon) - Number(twoLon)
            let bLat = Number(oneLat) - Number(twoLat)
            //Math.abs()绝对值
            if (bLon > 0) {
                aLon = Number(oneLon) - Math.abs(bLon) / 2
            } else {
                aLon = Number(twoLon) - Math.abs(bLon) / 2
            }
            if (bLat > 0) {
                aLat = Number(oneLat) - Math.abs(bLat) / 2
            } else {
                aLat = Number(twoLat) - Math.abs(bLat) / 2
            }
            return [aLon, aLat]
        },
        onInput() {
            this.$forceUpdate()
        },
        setButtonData() {},
        getRouterData() {
            // if (sessionStorage.getItem("AttributeQuerySearchData")) {
            //     let searchData = JSON.parse(sessionStorage.getItem("AttributeQuerySearchData"))

            //     if (searchData && Object.values(searchData).length > 0) {
            //         console.log("进来")
            //         this.$store.state.table.searchData = searchData
            //     }
            //     sessionStorage.setItem("AttributeQuerySearchData", JSON.stringify({}))
            // }
            this.$store.state.table.searchData = {
                pageSize: this.$store.state.table.searchData.pageSize,
                pageIndex: this.$store.state.table.searchData.pageIndex,
            }

            if (Object.values(this.$route.params).length > 0) {
                if (this.$route.params.Category && this.$route.params.Category.length > 0) {
                    this.$route.params.Category.forEach((e) => {
                        this.setLanguageTwo("资料类别", e)
                    })
                }

                if (this.$route.params.Language && this.$route.params.Language.length > 0) {
                    this.$route.params.Language.forEach((e) => {
                        this.setLanguageTwo("语种", e)
                    })
                }

                if (this.$route.params.WorkDegree && this.$route.params.WorkDegree.length > 0) {
                    this.$route.params.WorkDegree.forEach((e) => {
                        if (e == "1:1500000" || e == "1:2000000" || e == "1:2500000") {
                            this.setLanguageTwo("工作程度", "小于1:100万")
                        } else if (e == "1:5000" || e == "1:2000" || e == "1:1000") {
                            this.setLanguageTwo("工作程度", "大于1:1万")
                        } else if (e == "1:1000000") {
                            this.setLanguageTwo("工作程度", "1:100万")
                        } else if (e == "1:500000") {
                            this.setLanguageTwo("工作程度", "1:50万")
                        } else if (e == "1:250000") {
                            this.setLanguageTwo("工作程度", "1:25万")
                        } else if (e == "1:200000") {
                            this.setLanguageTwo("工作程度", "1:20万")
                        } else if (e == "1:100000") {
                            this.setLanguageTwo("工作程度", "1:10万")
                        } else if (e == "1:50000") {
                            this.setLanguageTwo("工作程度", "1:5万")
                        } else if (e == "1:25000") {
                            this.setLanguageTwo("工作程度", "1:2.5万")
                        } else if (e == "1:10000") {
                            this.setLanguageTwo("工作程度", "1:1万")
                        } else {
                            this.setLanguageTwo("工作程度", e)
                        }
                    })
                }

                this.$store.state.table.searchData = this.$route.params

                this.$route.params.FormDateBegin && this.formDate.push(this.$route.params.FormDateBegin)
                this.$route.params.FormDateEnd && this.formDate.push(this.$route.params.FormDateEnd)
            }
        },
        reset() {
            this.$store.state.table.searchData = {
                pageSize: 10,
                pageIndex: 1,
            }
            this.formDate = []
            this.search_buttonData = [
                {
                    label: "语种",
                    prop: "Language",
                    data: [
                        { name: "不限", IsSelect: false },
                        { name: "中文", IsSelect: true },
                        { name: "英文", IsSelect: true },
                        { name: "日文", IsSelect: true },
                        { name: "韩文", IsSelect: true },
                    ],
                },
                {
                    label: "资料类别",
                    prop: "Category",
                    data: [
                        { name: "不限", IsSelect: false },
                        { name: "区域地质调查", IsSelect: true },
                        { name: "矿产勘查", IsSelect: true },
                        { name: "水工环地质勘查", IsSelect: true },
                        { name: "物化遥勘查", IsSelect: true },
                        { name: "油气地质", IsSelect: true },
                        { name: "海洋地质", IsSelect: true },
                        { name: "地质科学研究", IsSelect: true },
                        { name: "技术方法", IsSelect: true },
                        { name: "其他", IsSelect: true },
                    ],
                },
                {
                    label: "工作程度",
                    prop: "WorkDegree",
                    data: [
                        { name: "不限", IsSelect: false, label: "不限" },
                        { name: "小于1:100万", IsSelect: true, label: "小于1:1000000" },
                        { name: "1:100万", IsSelect: true, label: "1:1000000" },
                        { name: "1:50万", IsSelect: true, label: "1:500000" },
                        { name: "1:25万", IsSelect: true, label: "1:250000" },
                        { name: "1:20万", IsSelect: true, label: "1:200000" },
                        { name: "1:10万", IsSelect: true, label: "1:100000" },
                        { name: "1:5万", IsSelect: true, label: "1:50000" },
                        { name: "1:2.5万", IsSelect: true, label: "1:25000" },
                        { name: "1:1万", IsSelect: true, label: "1:10000" },
                        { name: "大于1:1万", IsSelect: true, label: "大于1:10000" },

                        { name: "预查", IsSelect: true, label: "预查" },
                        { name: "普查", IsSelect: true, label: "普查" },
                        { name: "详查", IsSelect: true, label: "详查" },
                        { name: "勘探", IsSelect: true, label: "勘探" },
                        { name: "开发勘探", IsSelect: true, label: "开发勘探" },
                    ],
                },
            ]
        },
        async MineralInfo() {
            const { data } = await this.$store.dispatch("search/MineralInfo")
            try {
                this.mineralSpeciesOption = data
            } catch {}
        },
    },
}
</script>

<style scoped lang="scss">
$color: #36668e;
$color_hover: #103264;

.search {
    .search_input {
        display: flex;
        justify-content: space-around;
        align-items: center;

        span {
            width: 1.7rem;
            background: #1b50a0;
            color: #fff;
            font-size: 0.32rem;
            text-align: center;
            padding: 15px 5px;
        }
    }

    .search_button {
        .el-form-item {
            width: 100% !important;
            border: 1px solid #eee;
            margin-bottom: 0;
            padding: 10px 0;

            .el-button {
                margin: 0 10px;
            }
        }
    }

    .search_input .el-input {
        height: 60px;
        width: calc(100% - 200px);

        ::v-deep .el-input__inner {
            height: 100%;
            // border-radius: 25px;
            // border-top-right-radius: 0;
            // border-bottom-right-radius: 0;
        }

        ::v-deep .el-input-group__append {
            width: 100px;
            background: #1b50a0;
            color: #fff;
            font-size: 24px;
            text-align: center;
        }

        ::v-deep.el-input-group__append:hover {
            cursor: pointer;
        }
    }

    // .SpatialRetrieval {
    //     border-bottom: 1px solid $text_color;
    //     text-decoration: underline;
    // }
    //查询框
    .SeniorSearch {
        margin: 10px 0;
        padding: 20px 10px;
        border: 1px solid #ccc;
        background: #fafcff;

        .search_button {
        }

        .languages {
            .el-select {
                padding: 0 10px;
            }

            .el-button {
                padding: 10px 30px;
            }
        }

        .el-form-item {
            width: 6.5rem;
            background: white;

            ::v-deep .el-form-item__content {
                width: calc(100% - 2.5rem);

                .el-input {
                    width: 100%;
                }

                .el-select {
                    width: 100%;
                }

                .el-cascader {
                    width: 100%;
                }

                .el-date-editor {
                    width: 100%;
                }
            }
        }
    }

    //按钮颜色
    .el-button--goon {
        color: white;
        background: #9ec8f9;
        border-color: #9ec8f9;
    }

    .el-button--goon:focus,
    .el-button--goon:active,
    .el-button--goon:hover {
        color: white;
        background: #9ec8f9;
        border-color: #9ec8f9;
    }

    .el-button--goon.is-plain {
        color: #333;
        background-color: white;
        border-color: white;
    }

    // .el-button--goon.is-plain:focus,
    .el-button--goon.is-plain:active,
    .el-button--goon.is-plain:hover {
        color: white;
        background: #9ec8f9;
        border-color: #9ec8f9;
    }
}
</style>
